<template>
  <div class="mainServiceItem">
    <div class="mainButton">
      <div>
        <div class="input">
          <Input
            search
            clearable
            placeholder="搜索服务"
            mainServiceItem
            v-model="name"
            @on-search="queryService"
            @on-clear="clearSearch"
          />
        </div>
        <div class="button">
          <Button :disabled="buttonState" @click="submit">分类</Button>
        </div>
      </div>
    </div>
    <Loading v-if="isLoading"></Loading>
    <Table
      border
      :columns="columns5"
      :data="tableData"
      @on-selection-change="getData"
      v-if="!isLoading"
    ></Table>
    <div class="page" v-if="!isLoading">
      <Page
        :total="serviceItemsTotal"
        show-elevator
        show-total
        @on-change="pageParams"
      />
    </div>
  </div>
</template>
<script>
import Loading from "../Other/Loading";
export default {
  name: "serviceItem",
  data() {
    return {
      buttonState: true,
      columns5: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "标题",
          key: "title",
        },
        {
          title: "服务类型",
          key: "themeClass",
        },
        {
          title: "修改日期",
          key: "publishDate",
        },
      ],
      tableData: [],
      serviceItemsTotal: 0,
      page: 1,
      size: 10,
      classData: [],
      isPageDisabled: false,
      name: "",
      isLoading: true,
    };
  },
  components: {
    Loading,
  },
  watch: {
    classData: {
      handler() {
        if (this.classData.length > 0) {
          this.buttonState = false;
        } else {
          this.buttonState = true;
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      this.tableData.length = 0;
      this.axios
        .get("/service", { page: this.page, size: this.size })
        .then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.serviceItemsTotal = res.data.total;
            this.isLoading = false;
          } else {
            this.$Message.info("当前无服务！");
            this.isLoading = false;
          }
        });
    },
    queryService() {
      this.axios
        .get("/service", {
          params: {
            name: this.name,
            page: 1,
            size: 10,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data;
            this.serviceItemsTotal = res.data.total;
          } else {
            this.$Message.info("未找到指定服务！");
          }
        });
      this.isPageDisabled = true;
    },
    clearSearch() {
      this.getTableData();
      this.isPageDisabled = false;
    },
    pageParams(page) {
      this.page = page;
      this.getTableData();
    },
    getData(e) {
      this.classData = [].concat(e);
    },
    submit() {
      this.$store.dispatch("oneMapConfig/updateclassServices", this.classData);
      this.$emit("contentState", true);
    },
  },
};
</script>
<style scoped>
.mainServiceItem {
  width: 70%;
  height: 100%;
  float: right;
  padding: 0 15px;
  overflow-y: auto;
}
.page {
  text-align: center;
  margin-top: 15px;
}
.input {
  display: inline-block;
  width: 40%;
}
.button {
  float: right;
}
.mainButton {
  margin-bottom: 20px;
}
.button button {
  margin: 8px;
}
</style>
